<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h2>当前的n值是：{{n}}</h2>
      <button @click="add" id="btn">点我n+1</button>  
      <button @click="goDie">我要去死</button>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el:'#demo',
        /* template:`
          <div>
            <h2>当前的n值是：{{n}}</h2>
            <button @click="add" id="btn">点我n+1</button>  
          </div>
        `, */
        data:{
          n:1
        },
        methods:{
          add(){
            console.log('add被调用了')
            this.n += 1
          },
          goDie(){
            console.log('goDie被调用了')
            this.$destroy()
          }
        },
        watch:{
          n(val){
            console.log('n变化了',val)
          }
        },
        //数据代理、数据劫持 创建之前
        beforeCreate(){
          console.log('beforeCreate',this)
          // debugger;
          this.__proto__.a = 9
        },
        //数据代理、数据劫持 创建完毕
        created(){
          console.log('created',this)
          // debugger;
        },
        // 挂载之前
        beforeMount(){
          // 此时的$el还是没有解析的模板
          console.log('beforeMount',this.$el)
          // 下面这行代码对DOM的操作，最终都不奏效
          // document.getElementById('btn').innerText = '0202'
          // debugger;
        },
        // 挂载完毕（常用）
        mounted(){
          // 此时的$el是模板经过解析之后的内容
          console.log('mounted',this.$el)
          // debugger;
        },
        // 页面更新之前
        beforeUpdate(){
          console.log('beforeUpdate',this.n)
          // debugger;
        },
        // 页面更新完毕
        updated(){
          console.log('updated',this.n)
        },
        // 销毁之前（即将死亡，还没死）
        beforeDestroy(){
          console.log('beforeDestroy')
          console.log(this.n)
        },
        
      })
    </script>
  </body>
</html>